<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Cirodown editor demo</title>
<link rel="stylesheet" href="cirodown.min.css">
<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#container {
  align-items: center;
  display: flex;
  /* https://stackoverflow.com/questions/12989931/body-height-100-displaying-vertical-scrollbar/46847795#46847795
   * 20 == 2x 10px padding (top + bottom). */
  height: calc(100% - 20px);
  padding: 10px;
}
#input {
  border: 1px black solid;
  flex-grow: 1;
  height: 100%;
  margin: 0 5px 0 0;
  overflow: auto;
  width: 50%;
}
#output {
  border: 1px black solid;
  flex-grow: 1;
  height: 100%;
  margin: 0 0 0 5px;
  overflow: auto;
  width: 50%;
}
</style>
</head>
<body>
<div id="container">
<div id="input" contenteditable="true" style="white-space:pre-wrap">= Cirodown hello world

Welcome to Cirodown! Here's the table of contents:

\toc

== Paragraphs, code, math

My first paragraph is amazing!

And the second one with inline code `f(){}` and inline server-side rendered maths with KaTeX: $\sqrt{1+1}$.

But if we want block code here it is:
``
f() {
  return 1;
}
``
and here is some block maths:
$$
\sqrt{1+1} \\
\sqrt{1+1}
$$

Ciro loves maths, and so equations can have titles, and references to math equations just work! See e.g.: \x[my-favorite-equation]
$$
\newcommand{\va}[1]{\overrightarrow{#1}}
\newcommand{\B}[0]{\va{\mathbf{B}}}
\newcommand{\E}[0]{\va{\mathbf{E}}}
\newcommand{\divergence}[1]{\nabla \cdot #1}
\newcommand{\vacuumPermittivity}[0]{\varepsilon_0}
\divergence{\E} = \frac{\rho}{\vacuumPermittivity} \\
\divergence{\B} = 0
$$
{title=This is my favorite equation in the entire world!!!}
{id=my-favorite-equation}

== Lists, tables, quotation

Meh, the usual. Insane list:
* first item
* second item
  * some nesting
  * and some more
* third item
Sane list with explicit `ul`:
\ul[
\l[first item]
\l[second item]
]

And now for tables, see this one \x[table-my-table].
\table{title=My table title}
{id=table-my-table}
[
\tr[
  \th[Header 1]
  \th[Header 2]
]
\tr[
  \td[1 1]
  \td[1 2]
]
\tr[
  \td[2 1]
  \td[2 2]
]
]

And a quotation:
\q[To be or not to be!

Cirodown is the answer.]

== References, headers, images

Ciro loves headers and headers!

Reference to a header: \x[paragraphs-and-stuff]. Or if you want to show the section id: \x[paragraphs-and-stuff]{style=full}.

Reference to the following image: \x[fig-my-xi-chrysanthemum].

\Image[https://raw.githubusercontent.com/cirosantilli/media/master/Chrysanthemum_Xi_Jinping_with_black_red_liusi_added_by_Ciro_Santilli.jpg]
{title=Xi Chrysanthemum is a very nice image}
{id=fig-my-xi-chrysanthemum}
{source=https://commons.wikimedia.org/wiki/File:Lotus_flower_(978659).jpg}

=== Unlimited header levels?!

==== My h4

===== My h5

====== My h6

\h[7][My h7]

\h[8][My h8]

\h[9][My h9]

\h[10][My h10]

\h[11][My h11]

\h[12][My h12]

\h[13][My h13]
</div>
<div id="output" class="cirodown">
</div>
</div>
</body>
<script src="cirodown.js"></script>
<script>
let input_elem = document.getElementById('input');
let output_elem = document.getElementById('output');
function convert_input() {
  output_elem.innerHTML = cirodown.convert(
      input_elem.innerText, {'body_only': true});
}
input_elem.addEventListener('input', convert_input, false);
convert_input();
</script>
</html>
